<template>
  <div>
    <el-container style="background: #f5f7f9;">
      <el-header style="background: #fff;padding: 12px 12px;height:auto;">
        <div>
          <el-form :model="queryData" :inline="true" size="small">
            <el-form-item label="状态">
              <el-radio-group v-model="queryData.status" size="small" @change="queryOrder()">
                <el-radio-button label="all">所有订单</el-radio-button>
                <el-radio-button label="cancelled">已删除</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="产品">
              <el-select v-model="queryData.channelId" clearable filterable>
                <el-option v-for="(item, i) in channelOptions" :key="i" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item v-if="!isOrgOwner" label="客户">
              <el-select v-model="queryData.orgOwner" clearable filterable>
                <el-option v-for="(d, i) in customerOptions" :key="i" :label="d.orgOwnerName" :value="d.orgOwner" />
              </el-select>
            </el-form-item>
            <el-form-item label="订单号">
              <el-input v-model="queryData.orderId" :rows="1" style="width: 280px;" type="textarea" placeholder="多个单号用回车分割" />
            </el-form-item>
            <el-form-item label="客户订单号">
              <el-input v-model="queryData.customerRef" :rows="1" style="width: 280px;" type="textarea" placeholder="多个单号用回车分割" />
            </el-form-item>
            <el-form-item>
              <el-date-picker
                v-model="queryData.createAtRange"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchData()">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-header>
      <el-main style="margin-top: 15px; background: #fff;padding: 12px 16px 0 16px;height: 100%;">
        <el-table ref="multipleTable" :data="tableData" stripe tooltip-effect="dark" :max-height="tableHeight" border @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="orderNumber" fixed label="订单号" />
          <el-table-column prop="customerRef" label="客户订单号" />
          <el-table-column prop="orgOwnerName" label="客户" />
          <el-table-column prop="channelName" label="产品" />
          <el-table-column prop="totalCarton" label="托数" />
          <el-table-column prop="totalWeight" label="总重量" />
          <el-table-column prop="createAt" label="创建时间" />
          <el-table-column prop="status" label="订单状态" />
          <el-table-column prop="totalCharge" label="费用" />
          <el-table-column v-if="queryData.status !== 'cancelled'" label="操作" fixed="right">
            <template slot-scope="scope">
              <el-button v-has="20201" size="small" shape="circle" type="text" @click="showDetail(scope.row)">明细</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer style="padding:0;background: #fff;">
        <div style="text-align: right; padding-top: 10px;">
          <!-- 分页 -->
          <el-pagination background :current-page="queryData.currentPage" :page-sizes="[50, 100, 200, 300, 400]" :page-size="queryData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" style="float: right;" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
      </el-footer>
    </el-container>
    <Detail ref="detail" />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import request from '@/utils/request'
import Detail from './detail'
export default {
  components: { Detail },
  data() {
  return {
    pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              picker.$emit('pick', [start, end])
            }
          },
          {
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      queryData: {
        pageSize: 50,
        currentPage: 0,
        orgOwner: '',
        orderId: '',
        customerRef: '',
        channelId: '',
        status: 'all',
        createAtRange: []
      },
      tableData: [],
      multipleSelection: [],
      currentPage: 1, // 分页
      total: 0
    }
  },
  computed: {
    tableHeight() {
      return document.documentElement.clientHeight - 250
    },
    ...mapState(//
      {
        paymentTerm: state => state.base.paymentTerm,
        customerOptions: state => state.base.customerOptions,
        channelOptions: state => state.base.channelOptions,
        profile: state => state.user,
        orderStatusOptions: state => state.base.orderStatusOptions
      }
    ),
    isOrgOwner() {
      return this.profile.orgOwner
    }
  },
  created() {
    this.queryOrder()
  },
  methods: {
    searchData() {
      this.queryData.currentPage = 1
      this.queryOrder()
    },
    // 搜索
    queryOrder() {
      request({
        url: 'truck2/query',
        data: this.queryData,
        method: 'post'
      }).then(res => {
        if (res.success) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      })
    },
    // 查看
    showDetail(row) {
      this.$refs.detail.show(row)
    },
    // 多选按钮
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 分页
    handleSizeChange(val) {
      this.queryData.currentPage = 1
      this.queryData.pageSize = val
      this.queryOrder()
    },
    handleCurrentChange(val) {
      this.queryData.currentPage = val
      this.queryOrder()
    }
  }
}
</script>
